<template>
    <div class="setting">
        <el-row :gutter="20">
            <el-col :span="24"><div class="title">设置</div></el-col>
            <el-col :span="24">
                <el-form class="elForm" ref="settingForm" :model="settingForm" label-width="100px" >  <!-- size="mini" -->
                    <el-col :span="24">                   
                        <el-col :span="12">
                            <h3 class="h3">修改密码：</h3>
                            <el-form-item label="输入原密码" >
                                <el-input v-model="settingForm.oldPwd" placeholder="请输入原密码"></el-input>
                            </el-form-item>
                            <el-form-item label="输入新密码">
                                <el-input v-model="settingForm.newPwd" placeholder="请输入新密码"></el-input>
                            </el-form-item>
                            <el-form-item label="确认新密码">
                                <el-input v-model="settingForm.confirmPwd" placeholder="请确认新密码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <h3 class="h3">异常车辆：</h3>
                            <el-form-item label="支付超时时间" label-width="120px">
                                <el-input v-model="settingForm.payOutTime" placeholder="请输入支付超时时间"></el-input>
                                <!-- <el-select v-model="settingForm.payOutTime" placeholder="请选择支付超时时间">
                                    <el-option label="120秒" value="120"></el-option>
                                    <el-option label="600秒" value="600"></el-option>
                                </el-select> -->
                            </el-form-item>
                            <el-form-item label="异常车辆提示音" label-width="120px">
                                <el-switch v-model="settingForm.isCue" :active-value="0" :inactive-value="1"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24"> 
                        <el-col :span="12">
                            <h3 class="h3">出入口：</h3>
                            <el-form-item label="默认显示">
                                <el-select v-model="settingForm.laneSet" placeholder="请选择默认显示">
                                    <el-option label="出口" :value="0"></el-option>
                                    <el-option label="入口" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <h3 class="h3">下发语音：</h3>
                            <el-form-item label="语音内容" label-width="120px">
                                <el-select v-model="settingForm.voiceSelect" placeholder="请选择语音内容">
                                    <el-option :label="item" :value="item" v-for="item in voiceList" :key='item'></el-option>
                                    <!-- <el-option label="请倒车2米后重新识别" :value="2"></el-option> -->
                                </el-select>
                            </el-form-item>
                            <el-form-item label="添加语音" label-width="120px">
                                <el-input v-model="settingForm.inpVoice" placeholder="请输入语音"></el-input>
                                <el-button type="primary" @click="addVoice">添加</el-button>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="24"> 
                        <el-form-item label-width="0px" class="elFormItemFooter">
                            <el-button type="primary" @click="submitForm('settingForm')">确认</el-button>
                            <el-button @click="cancelbtn">取消</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
/**
 * 扩展Array方法, 去除数组中空白数据
 */
Array.prototype.notempty = function() {
    var arr = [];
    this.map(function(val, index) {
        //过滤规则为，不为空串、不为null、不为undefined，也可自行修改
        if (val !== "" && val != undefined) {
            arr.push(val);
        }
    });
    return arr;
}
import { mapGetters } from "vuex"
export default {
    data() {
        return {
            voiceList:[],
            settingForm:{
                oldPwd:"",
                newPwd:"",
                confirmPwd:"",
                payOutTime:"",
                isCue:1,
                laneSet:1,
                voiceSelect:'',
                voice:'',
                inpVoice:"", //请扫码缴费
            }
        }
    },
    computed: {
        ...mapGetters(["userInfo",'parkInfo'])
    },
    created() {
        this.init()
    },
    methods: {
        init(){
            this.$api.home.getSetInfo().then(res=>{
                //debugger
                let data = res.data
                if(data.code==200){
                    this.settingForm.payOutTime = data.result.payOutTime
                    this.settingForm.laneSet = data.result.laneSet
                    this.settingForm.isCue = data.result.isCue
                    this.settingForm.voice = data.result.voice
                    this.voiceList = this.settingForm.voice?this.settingForm.voice.split(',').notempty():[]
                    this.settingForm.voiceSelect = data.result.voiceSet?data.result.voiceSet:this.voiceList[0]

                }else{
                    this.$message.error(data.message)
                }
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        //添加语音
        addVoice(){
            if(this.settingForm.voice&&this.settingForm.voice.indexOf(this.settingForm.inpVoice)!==-1){
                return
            }
            if(this.settingForm.inpVoice!=""){  
                if(!this.settingForm.voice){
                    this.settingForm.voice=this.settingForm.inpVoice+',' 
                }else{                                  
                    this.settingForm.voice += this.settingForm.inpVoice+','                
                }
                console.log(this.settingForm.voice,'this.settingForm.voice')
                this.settingForm.inpVoice = ""                
                this.voiceList = this.settingForm.voice.split(',').notempty()
            }
            console.log(this.voiceList,'this.voiceList')
        },
        submitForm(){
            let params = {
                userid:this.userInfo.id,
                isCue:this.settingForm.isCue,
                laneSet:this.settingForm.laneSet,
                payOutTime:this.settingForm.payOutTime,
                voice:this.settingForm.voice,
                voiceSet:this.settingForm.voiceSelect
            }
            console.log(params,'params')
            this.$api.home.setUserInfo(params).then(res=>{
                let data = res.data
                if(data.code==200){
                    this.init()
                    this.$message.success(data.message)
                }else{
                    this.$message.error(data.message)
                }
            }).catch(error=>{
                this.$message.error(error)
            })
        },
        //取消
        cancelbtn(){
            this.$router.go(-1)
        }
    },
}
</script>
<style lang="less" soped>
    .setting{
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        .title{
            padding: 20px 0;
            font-size: 20px;
            text-align: center;
            border-bottom: 1px solid #aaa;
        }
        .h3{
            padding-left: 18px;
        }
        /deep/ .elForm{
            padding: 20px 0;
            .el-input{
                width: 270px;
            }
            .elFormItemFooter{
                margin-top:20px;
                text-align: center;
            }
        } 
    }
</style>